<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>达达微博</title>
    <!-- 引入 Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入 Axios 和 Vue -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>

<body class="bg-gray-100">

    <div class="container mx-auto p-10 bg-white rounded-lg shadow-lg mt-10">
        <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">达达微博</h1>

        <!-- 用户登录状态 -->
        <div v-if="isLogin" class="welcome text-center mb-5">
            <h3 class="text-lg text-gray-700">欢迎 <span class="text-red-600 font-semibold" v-text="user.nickname"></span> 回来！</h3>
            <div class="mt-3 flex justify-center space-x-4">
                <a href="/insert.html" class="bg-blue-600 text-white hover:bg-blue-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                    <i class="fas fa-pencil-alt mr-1"></i> 发微博
                </a>
                <a href="javascript:void(0)" @click="logout()" class="bg-red-600 text-white hover:bg-red-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                    <i class="fas fa-sign-out-alt mr-1"></i> 退出登录
                </a>
            </div>
        </div>
        <div v-else class="welcome text-center mb-5">
            <div class="flex justify-center space-x-4">
                <a href="/reg.html" class="bg-green-600 text-white hover:bg-green-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                    <i class="fas fa-user-plus mr-1"></i> 注册
                </a>
                <a href="/login.html" class="bg-blue-600 text-white hover:bg-blue-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                    <i class="fas fa-sign-in-alt mr-1"></i> 登录
                </a>
            </div>
        </div>

        <hr class="my-5">

        <!-- 微博列表 -->
        <div v-if="arr.length === 0" class="no-weibos text-center text-gray-500 mt-10">
            <i class="fas fa-exclamation-circle text-yellow-500 text-2xl"></i>
            <p class="mt-2">暂无微博</p>
        </div>
        <ul class="weibo-list" v-else>
            <li class="weibo-item border-b border-gray-200 py-4 flex-wrap" v-for="w in arr" :key="w.id">
                <h3 class="text-md">
                    <a :href="'/detail.html?id=' + w.id" class="text-gray-800 hover:text-red-500 transition duration-300 flex items-center">
                        <span class="font-bold text-lg text-red-600" v-text="w.nickname"></span>:
                        <span class="ml-2" v-text="w.content"></span>
                    </a>
                </h3>
            </li>
        </ul>

        <!-- 添加一些间距 -->
        <div class="mt-5">
            <hr class="my-5">
        </div>
    </div>

    <script>
        (function () {
            let v = new Vue({
                el: ".container",
                data: {
                    isLogin: false,
                    user: {},
                    arr: []
                },
                methods: {
                    logout() {
                        axios.get("/v1/users/logout", {
                            headers: {
                                'X-CSRF-Token': 'your-csrf-token'
                            }
                        }).then(function (response) {
                            v.isLogin = false;
                        }).catch(function (error) {
                            console.error('Logout failed:', error);
                        });
                    }
                },
                created: function () {
                    axios.get("/v1/users/currentUser").then(function (response) {
                        v.user = response.data;
                        v.isLogin = response.data && typeof response.data !== 'string';
                    }).catch(function (error) {
                        console.error('Failed to get current user:', error);
                        v.isLogin = false; // 默认设置为未登录
                    });

                    axios.get("/v1/weibo/selectIndex").then(function (response) {
                        v.arr = response.data;
                    }).catch(function (error) {
                        console.error('Failed to get weibo data:', error);
                        v.arr = []; // 默认设置为空数组
                    });
                }
            });
        })();
    </script>

</body>

</html>